<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
    <!-- 引入公用Js与Css -->
	<%@include file="/view/common/resource.jsp" %>
    <title>单点登录</title>
	<style>
	body{
		background:url('<%=basePath%>/images/bg.jpg') no-repeat center top;height:100%;
		font-family: 'microsoft yahei',Arial,sans-serif;
		background-color: #222;
	}
	.redborder {
		border:2px solid #f96145;
		border-radius:2px;
	}
	.row {
		padding: 20px 0px;
	}
	.bigicon {
		font-size: 97px;
		color: #f08000;
	}
	.loginpanel {
		text-align: center;
		width: 300px;
		border-radius: 0.5rem;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		margin: 10px auto;
		background-color: #555;
		padding: 20px;
	}
	input {
		width: 100%;
		margin-bottom: 17px;
		padding: 15px;
		background-color: #ECF4F4;
		border-radius: 2px;
		border: none;
	}
	h2 {
		margin-bottom: 20px;
		font-weight: normal;
		color: #EFEFEF;
	}
	.btn {
		border-radius: 2px;
		padding: 10px;
	}
	.btn span {
		font-size: 27px;
		color: white;
	}
	.buttonwrapper{
		position:relative;
		overflow:hidden;
		height:50px;
	}
	.lockbutton {
		font-size: 27px;
		color: #f96145;
		padding: 10px;
		width:100%;
		/*position:absolute;*/
		top:0;
		left:0;
	}
	.loginbutton {
		background-color: #f08000;
		width: 100%;
		-webkit-border-top-right-radius: 0;
		-webkit-border-bottom-right-radius: 0;
		-moz-border-radius-topright: 0;
		-moz-border-radius-bottomright: 0;
		border-top-right-radius: 0;
		border-bottom-right-radius: 0;
		left: -260px;
		/*position:absolute;*/
		top:0;
	}
	</style>
	
</head>
<body>

<div class="container-fluid">
    <div class="row">
        <div class="loginpanel">
            <h2>
				单点登录 
			</h2>
            <div>
            <form id="loginForm" action="<%=basePath%>/loginCheck" data-successUrl="<%=basePath%>/main" method="post" onsubmit="return false;">
                <input type="text"  id="memName" name="memName" placeholder="登录账号" onkeypress="check_values();">
                <input type="password" id="memPwd" name="memPwd" placeholder="输入密码" onkeypress="check_values();">

				<div class="buttonwrapper">
					<button id="loginbtn" class="btn btn-warning loginbutton">
						<span class="fa fa-check"></span>
					</button>
					<span id="lockbtn" class="fa fa-lock lockbutton redborder"></span>
				</div>
			</form>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">

	// 控制跳出iframe框架
	if (window != top) {
		top.location.href = location.href; 
	}
	
	$(function(){
		$("#loginbtn").click(function(){
			toLogin();// 登录操作
		});
	});
    function check_values() {
        if ($("#memName").val().length != 0 && $("#memPwd").val().length != 0) {
            $("#loginbtn").animate({ left: '0' , duration: 'slow'});
            $("#lockbtn").animate({ left: '260px' , duration: 'slow'});
        }
    }
    
	function toLogin(){
		
		var memName = $("#memName").val();
		if (memName == null || memName == "") {
			layer.msg("登录账号不能为空", {icon: 5, time:2000});
			return;
		}
		
		var memPwd = $("#memPwd").val();
		if (memPwd == null || memPwd == "") {
			layer.msg("登录密码不能为空", {icon: 5, time:2000});
			return;
		}
		
		//提交路径
		var actionurl=$('#loginForm').attr('action');
		var successUrl=$('#loginForm').attr('data-successUrl');
		
		// 加载层
	  	layer.load();
	  	
	    $("#loginForm").ajaxSubmit({
	    	type:"post",
	    	url:actionurl,
	    	dataType: "json",
	    	success:function(data){
	    		layer.closeAll('loading');
    	    	if (data.success) {
	   	        	// 成功后跳转首页
    	    		window.location.href = successUrl;
	   	        } else {
	   	      		// 失败提醒
	   	        	layer.msg(data.msg, {icon: 5, time:2000});
	   	        }
   	    	}
	    })
	}
</script>
</body>
</html>